<script setup lang="ts">
import { NSpace, NButton, NIcon } from "naive-ui";
import { IconBack } from "@/plugins/icon";
import { useRouter, useRouterName } from "@/plugins/router";
import { onUnmounted, ref, watch } from "vue";
import { Animation, First, Second } from "@/composables";
import { useConfigStore } from "@/plugins/store";

const { toName } = useRouter();
const { config } = useRouterName();
const canvas = ref<HTMLElement | null>(null);

onUnmounted(() => {
  animation.clear();
});

// 初始化动画组件
const store = useConfigStore();
const animation: Animation = new Animation({
  ...store.global,
  yMax: store.yMax,
  xMax: store.xMax,
});

// 元素挂载后运行动画
watch(canvas, () => {
  if (canvas.value !== null) {
    animation.addObject(new First(store.first));
    animation.addObject(new First(store.second));
    animation.run(canvas.value);
  }
});
</script>

<template>
  <NSpace size="large" class="tw-mt-4 tw-ml-6">
    <NButton
      circle
      @click="toName(config)"
      type="primary"
      class="tw-z-50 tw-opacity-0 hover:tw-opacity-100"
    >
      <NIcon>
        <IconBack />
      </NIcon>
    </NButton>
    <div ref="canvas"></div>
  </NSpace>
</template>

<style scoped></style>
